<style lang="scss">
#nct{
    padding:10px;
    background:#fff;
    .nct-content{
        &.displayNone{
            display:none;
        }
        .m-table{
            margin:10px 0;
        }
        .m-content{
            font-size:14px;
            padding:0 1em;
            line-height:30px;
        }
    }
}
</style>
<template>
    <div id="nct" class="content-mask" v-loading="loading">
        <div class="nct-content">
            <p class="m-title"><i></i><span>Study Record Detail</span></p>
            <div class="m-table">
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">NCT ID</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{nctObject.nctId}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">Sponsors</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{nctObject.sponsor}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">Recruitment</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{nctObject.recruitment}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">Investigators</el-col>
                    <el-col :span="8" class="m-table-content m-table-td"></el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">Phase</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{nctObject.phase}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td"></el-col>
                    <el-col :span="8" class="m-table-content m-table-td"></el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">Title</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{nctObject.title}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">Therapies</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{nctObject.therapy}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">Indications</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{nctObject.indication}}</el-col>
                </el-row>
            </div>
        </div>
        <div class="nct-content displayNone">
            <p class="m-title"><i></i><span>Contact</span></p>
            <p class="m-title-s">Locations</p>
            <div class="m-table">
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="6" class="m-table-content m-table-td">United States, Florida</el-col>
                    <el-col :span="6" class="m-table-content m-table-td">United States, Washington</el-col>
                    <el-col :span="6" class="m-table-content m-table-td">Japan</el-col>
                    <el-col :span="6" class="m-table-content m-table-td">Korea, Republic of</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="6" class="m-table-content m-table-td">United States, Texas</el-col>
                    <el-col :span="6" class="m-table-content m-table-td"></el-col>
                    <el-col :span="6" class="m-table-content m-table-td"></el-col>
                    <el-col :span="6" class="m-table-content m-table-td"></el-col>
                </el-row>
            </div>
            <p class="m-title-s">Contact</p>
            <div>
                <p class="m-content">There may be multiple sites in this clinical trial. 1-877-CTLILLY (1-877-285-4559) or 1-317-615-4559</p>
            </div>
        </div>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
export default {
    name: 'nct',//世界临床试验详情
    data(){
        return{
            loading:false,
            nctId:"",
            nctObject:{}
        }
    },
    props:["id"],
    methods:{
        //获取世界临床试验详情
        getNctDetails(){
            let obj = {
                id : this.nctId
            };
            this.loading = true;
            medicine.getClinicaltrailById(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                       this.nctObject = data.data;
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("药品列表失败");
            });
        }
    },
    mounted() {
        this.nctId =this.id ? this.id : '';
        if(this.nctId){
            this.getNctDetails();
        }
    },
    watch:{
        "id":function(val){
            this.nctId = val;
            if(this.nctId){
                this.getNctDetails();
            }
        }
    }
}
</script>